<link rel="stylesheet" href="./css/frame2.css?v=1.0.1">
<style>
  .del {
    position: absolute;
    right: 0;
    color: #fff;
    width: 80px;
    text-align: center;
  }

  .logout-btn {
    position: sticky;
    bottom: 0;
  }

  #view1 .tx .yuan {
    display: none;
  }

  /* 搜索 */
  .search-wrap {
    position: relative;
  }

  .search-wrap .input {
    background: #f3f3f3;
    padding: 10px;
  }

  .search-wrap .input input {
    width: 100%;
    border-radius: 5px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
  }

  .search-wrap .input .btn {
    background: #4395FF;
    color: #fff;
    word-break: keep-all;
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 5px;
  }

  .search-wrap .u-list {
    max-height: 50vh;
    overflow-y: auto;
    position: absolute;
    box-shadow: 0 5px 5px #ddd;
    z-index: 1;
    background: #fff;
    width: 25vw;
  }

  .search-wrap .u-list::-webkit-scrollbar {
    display: none
  }

  .search-wrap .u-list .list {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .search-wrap .tx {
    object-fit: cover;
  }

  /* 移动端 */
  @media screen and (max-width: 640px) {
    #view1 .tx {
      margin: 0;
    }

    #view1 .tx .yuan {
      position: absolute;
      top: 0;
      display: block;
    }

    #view1 .content {
      display: none;
    }
  }
  
  .listTopOther{
	background: #c5c5f5 !important;
	color: #333333;
  }
  .listTopOther .content .name-wrap span{
	color: #333333 !important;
  }
</style>
<div class="wrap" id="view1" v-cloak>
  <div class="search-wrap">
    <div class="input flex">
      <input type="text" placeholder="请输入关键词搜索" v-model="key" @keyup.enter="searchSubmit()">
      <button class="btn" @click="searchSubmit()">搜索</button>
    </div>
    <ul class="u-list" id="js-search">
      <li class="list" v-for="(m, index) in searchList" @click="selectUser(m)">
        <img class="tx" :src="returnImg(m.user_head)" alt="">
        <p class="name">{{m.user_name}}</p>
      </li>
    </ul>
  </div>
  <ul class="u-wrap">
    <!-- <li class="list-wrap" v-for="i in 10">
            <div class="list">
                <div class="tx ">
                    <img src="../../image/touxiang.png" alt="">
                    <span class="yuan">99+</span>
                </div>
                <div class="content">
                    <div class="flex-bt">
                        <div class="name-wrap" style="position: relative;">
                            <span class="name">张三</span>
                        </div>
                        <span class="time">2021-06-25</span>
                    </div>
                    <div class="flex-bt new-margin-t-10">
                        <p class="msg aui-ellipsis-1">这是消息内容 这是消息内容 这是消息内容 这是消息内容 这是消息内容 这是消息内容 </p>
                        <span class="yuan">99+</span>
                    </div>
                </div>
            </div>
        </li> -->
    <li class="list-wrap" v-for="(m, index) in ffList"
    :class="{'listTopOther':m.top==1}"
      v-if="m.sex == '女' || (m.sex == '男' && maleShowTime && Date.parse(maleShowTime) < Date.parse(m.register_datetime))"
      :id="m.id">
      <div class="list" @click="goTalk(m.userid, m.name)">
        <div class="tx img-h">
          <img :src="returnImg(m.sumb_headimg)" onerror="this.onerror=null;this.src='./image/touxiang.png'" alt="">
        </div>
        <div class="content">
          <div class="flex-bt">
            <div class="name-wrap" style="position: relative;">
              <span class="name">{{m.name}}<span
                  style="color: skyblue">({{m.city2}})({{m.sex2}})</span><span style="color: skyblue;">({{m.userid}})</span></span>
              <span class="xuni-name">{{m.role_name}}</span>
            </div>
            <span class="time">{{m.addtime}}</span>
          </div>
          <div class="flex-bt new-margin-t-10">
            <p class="msg aui-ellipsis-1">{{clearHtml(m.content)}} </p>
            <span class="yuan" v-if="m.count > 0">{{m.count>99? '99+' : m.count}}</span>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <!-- <div class="logout-btn" onclick="signOut()"> 退出登录 </div> -->
</div>
<script>
  var trueName = '';
  var cityName = '';
  myuserid = getCookie('admin');
  var _ws = new WS();
  _ws.open();
  var readUser = {
    user_id: getCookie('admin'),
    touserid: '',
  };
  var viewTalk = new Vue({
    el: '#view1',
    data: {
      imgurl: imgurl,
      ffList: [],
      ffInfo: {},
      isVip: 0,
      liaotianType: 0, // 聊天是否打开过
      key: '',
      searchList: [],
      maleShowTime: 0
    },
    methods: {
      // 选择搜索用户
      selectUser(data) {
        var _this = this;
        _this.goTalk(data.user_id, data.user_name, data.city, getCookie('admin'))
        _this.searchList = [];
      },
      // 搜索
      searchSubmit() {
        getSearch(1)
      },
      // 清除html
      clearHtml: function (s) {
        return clearHtml(s);
      },
      // 打开聊天窗口
      goTalk: function (uid, name, city = '', myuid) {
        var _this = this;

        touserid = uid;
        // myuserid = myuid;
        readUser = {
          user_id: myuserid,
          touserid: touserid,
        }
        trueName = name;
        cityName = city;
        setCookie('userid', myuid)
        _load('#wrap .talk-detail', 'frame0/liaotian')
      },
      returnImg(s) {
        return returnImg(s)
      }
    }
  })
  judgeLogin();
  maleShowTime();
  openWS1()

  function openWS1() {
    var admin = getCookie('admin');

    // 建立长连接
    var _ws = new WS();
    _ws.open(function () {
      _ws.send(JSON.stringify({
        userid: 'ailiao241209' + admin
        //userid: admin
      }));
      getAllMsgList();
    });

    _ws.get(function (rets) {
      // console.log(rets)
      rets = JSON.parse(rets);
      // console.log(JSON.stringify(rets))
      if (rets.action) {
        var action = rets.action.toLowerCase();;
        if (action == 'home/privatechat/getotherlist') {
          if (rets.data && rets.data.result) {
            var result = rets.data.result;
            viewTalk.ffList = result;
            if (viewTalk.liaotianType == 0) {
              if (viewTalk.ffList.length > 0) {
                viewTalk.liaotianType = 1;
                var chatData = viewTalk.ffList[0];
                touserid = chatData.userid;
                // myuserid = chatData.role_user;
                readUser = {
                  user_id: myuserid,
                  touserid: touserid,
                }
                trueName = chatData.name;
                cityName = "";                
                // cityName = chatData.city_mask;
                _load('#wrap .talk-detail', 'frame0/liaotian')
              }
            }
          }
        }
        if (rets.action == 'Home/Privatechat/getreadcount') {
              if (rets.data.chat_count != 0) {
                sessionStorage.setItem('currentChatCount', rets.data.chat_count)
              }
        }
        if (rets.action == 'Home/Privatechat/getNewMsg') {
          if (rets.data.users) {
            var useObj = rets.data.users;
            if ((useObj.userid != view.myuserid && useObj.userid != view.touserid) || (useObj.touserid != view.myuserid && useObj.touserid != view.touserid)) return;
            if (rets.data.new && rets.data.new.length > 0) {
              if (rets.data.new[0].self == 0) {
                setRead();
              }
              addMoreMsg(rets.data.new);

            }
            // getAllMsgList();
            goToBottom();
          }
        }
        // if (rets.code == 200) {
        //     if (rets.action == 'Home/Privatechat/getXuniList') {
        //         _log(JSON.stringify(rets))
        //         var result = rets.data.result.result;
        //         viewTalk.ffList = result;
        //         if (viewTalk.liaotianType == 0) {
        //             if (viewTalk.ffList.length > 0) {
        //                 viewTalk.liaotianType = 1;
        //                 var chatData = viewTalk.ffList[0];
        //                 touserid = chatData.true_user;
        //                 // myuserid = chatData.role_user;
        //                 readUser = {
        //                     user_id: myuserid,
        //                     touserid: touserid,
        //                 }
        //                 trueName = chatData.name;
        //                 _load('#wrap .talk-detail', 'frame0/liaotian')
        //             }
        //         }
        //     }
        //    
        // }
      } else if (rets.type) {
        if (rets.type == 'ping') {
          _ws.send(JSON.stringify({
            type: 'pong'
          }));
        }
      }
    })
  }
  
    window.addEventListener('sessionStorageUpdated', function () {
    const message = sessionStorage.getItem('messageCountChange');
    let newFFList = JSON.parse(JSON.stringify(viewTalk.ffList))
    let found = newFFList.find(person => person.userid == message && person.count > 0);
    if (found !== undefined) {
      newFFList.forEach(item => {
        if (item.userid == message) {
          item.count = 0
        }
      });
      viewTalk.ffList = newFFList
    }
  })

  // 获取消息列表
  function getAllMsgList() {
    var admin = getCookie('admin');
    var obj = {
      userid: admin
    };
    _ajax('Home/Privatechat/getOtherList', function (ret, err) { }, {
      data: JSON.stringify(obj)
    })
    // _ajax('Home/Privatechat/getXuniList', function(ret) {
    // }, {
    //     id: admin
    // })
  }

  function signOut() {
    _ajax('chats/index/out', function (ret, err) {
      clearCookie('admin');
      var _this = this;
      var msg = ret.code == 200 ? '退出成功' : ret.msg;
      _msg(msg);
      if (ret && ret.code == 200) {
        window.location.href = phpurl + "chats";
      }
    })
  }

  function maleShowTime() {
    _ajax('api/index/maleShowTime', function (ret, err) {
      if (ret && ret.code == 200 && ret.msg) {
        viewTalk.maleShowTime = ret.msg
      }
    })
  }

  _scrollToBottom(function () {
    getSearch()
  }, '#js-search')

  function getSearch(init) {
    if (!viewTalk.key) return;
    var page = init == 1 ? 0 : Math.ceil(viewTalk.searchList.length / 10);
    if (init != 1 && viewTalk.searchList.length % 10 != 0) return;
    if (init == 1) {
      viewTalk.searchList = [];
    }
    _ajax('api/user/search', function (ret) {
      if (ret && ret.code == 200) {
        viewTalk.searchList = viewTalk.searchList.concat(ret.result)
      }
    }, {
      user_id: getCookie('admin'),
      name: viewTalk.key,
      longitude: 113.320234,
      latitude: 23.022241,
      page: page
    })
  }
</script>